<template>
  <header class="header">
    <h1>todos</h1>
    <input
      class="new-todo"
      autofocus
      autocomplete="off"
      placeholder="What needs to be done?"
      @keydown.enter="addTodo($event)"
    />
  </header>
</template>

<script setup lang="ts">
import useTodoStore from "../stores/useTodoStore";
let store = useTodoStore();

const addTodo = (e: Event) => {
  // console.log((e.target as HTMLInputElement).value);
  const res = {
    id: Date.now().toString(),
    title: (e.target as HTMLInputElement).value,
    done: false,
    isEdit: false,
  };
  store.addTodo(res);
  (e.target as HTMLInputElement).value = "";
};
</script>
